<template>
    <div class="discount whiteBg br5 h40 flex row flexSpace mt8 borderbox" @click="clickList">
        <div class="price">
            领券：<span class="quanStyle pl8 pr8 br10 fs12 pt1 pb1">{{coupons[0]['couponName'] | sliceString(10)}}</span>
        </div>
        <x-icon type="ios-arrow-forward" size="30"></x-icon>
        <popup v-model="show" height="50%" 
            :is-transparent="false" 
            :popup-style="{background:'white',padding:'1.5rem',paddingTop:'0rem',boxSizing:'border-box'}"
             @on-hide="bodyFixed(false)" @on-show="bodyFixed(true)"
            >
            <div class="vux-1px-b h40 lh40 fs16 bold">领取优惠</div>
            <div class="scrollView" @click.stop="()=>{}">
                <div class="flex col textL discount_list br10 borderbox mt10 lh26 p10" v-for="(item,index) in coupons" :key="index">
                    <h2 class="price fs18 mb15">￥{{item.denomination | denomination(item.type)}}</h2>
                    <p class="fs12 counp lh18">{{item.couponName | sliceString(16)}}</p>
                    <p class="fs12 counp lh16">有效期：{{item.validatyBeginDes}}至{{item.validatyEndDes}}</p>
                </div>
            </div>
            <div class="bot flex flexCenter">
                <button class="btnDefautl h30 lh30 w100" @click.stop="clickList">完成</button>
            </div>
        </popup>
    </div>
</template>
<script>
import { XButton, Popup } from 'vux';
import mixins from 'mixins';
export default {
    name:'discountInfo',
    mixins:[mixins],
    props:{
        coupons:{
            type:Array,
            default:[]
        }
    },
    data(){
        return {
            show:false,
        }
    },
    created(){
        
    },
    components:{
        XButton,Popup
    },
    methods:{
        clickList(){
            this.show = !this.show;
        }
    }
}
</script>
<style lang="less" scoped>
.discount{
    width:100%;
}
.discount_list{
    background:#f5f5f5;
}
.price{
    color:#fd3b2f;
}
.counp{
    color:#939298;
}
.quanStyle{
    background:#fd3b2f;
    color:white;
    position:relative;
    top:-0.1rem;
}
.vux-x-icon {
  fill: #c7c6cb;
}
.bot{
    position:absolute !important;
    left:1.5rem;
    right:1.5rem;
    bottom:0.5rem;
    background:white;
    color:white;
}
.btnDefautl{
    background:#ff3b2f;
    border-radius:2rem;
    color:white;
    outline:none;
    padding:0rem;
    border:none;
    font-size:1.8rem;
}
.scrollView{
    height: calc(100% - 28rem);
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
}
</style>
